/*
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2023-11-14 17:15:35
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2023-11-22 22:33:35
 * @FilePath: /three-react/src/pages/Camera/Camera1.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { useEffect, useRef } from "react"
import createRender from '@/createRender';
import * as THREE from 'three'

const state = {}
export default function Page() {
  
  const container = useRef(null);
  useEffect(() => {
    if (!state.isMounted) {
      createRender(container)(render);
      state.isMounted = true;
    }
  }, [])

  function render(scene, camera, renderer) {

    const origin = new THREE.Vector3(0,0,0);
    camera.position.set(202,123,125)
    camera.lookAt(origin.x, origin.y, origin.z);

    const U = origin.clone().sub(camera.position)
    const dir = U.normalize();
    console.log('手动获取相机位置到lookAt位置的单位向量', dir, dir.length());

    const dir1 = new THREE.Vector3();
    camera.getWorldDirection(dir1)
    console.log('相机自带的接口获取单位向量', dir1);

    camera.position.add(dir1.clone().multiplyScalar(-200))



    const geometry = new THREE.SphereGeometry(5)
    const material = new THREE.MeshLambertMaterial({
      color: 0xffff00,
    })
    const mesh1 = new THREE.Mesh(geometry, material);
    const mesh2 = new THREE.Mesh(geometry, material);


  
    scene.add(mesh1)
    scene.add(mesh2)
  }

  return (
    <div id="container" className="full container" ref={container}></div>
  )
}